<template>
	<view class="pages">
		<!-- 取消 -->
		<uni-popup ref="cancelOrderPopup" type="center" :animation="true" @change="changePopup($event,'cancelOrderPopup')">
			<view class="modal">
				<view class="modal-wrapper">
					<view class="psdBox">
						<view class="psdBox-wrapper">
							<view class="psdBox-header">确定取消当前订单吗？</view>
							<view class="psdBox-input--1"></view>
							<view class="psdBox-btnBox">
								<view class="psdBox-close" @tap="hidePopup('cancelOrderPopup')">取消</view>
								<view class="psdBox-confirm" @tap.stop="cancelOrder()">确定</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 申请原因 -->
		<uni-popup ref="textPopup" type="center" :animation="true" @change="changePopup($event,'textPopup')">
			<view class="modal">
				<view class="modal-wrapper">
					<view class="psdBox">
						<view class="psdBox-wrapper">
							<view class="psdBox-header">申述原因</view>
							<view class="psdBox-input">
								<input type="text" v-model="text" placeholder="请输入申述原因" placeholder-class="inputStyle">
							</view>
							<view class="psdBox-btnBox">
								<view class="psdBox-close" @tap="hidePopup('textPopup')">取消</view>
								<view class="psdBox-confirm" @tap.stop="$u.throttle(getIsComplaint,1000)">确定</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 密码 -->
		<uni-popup ref="psdPopup" type="center" :animation="true" @change="changePopup($event,'psdPopup')">
			<view class="modal">
				<view class="modal-wrapper">
					<view class="psdBox">
						<view class="psdBox-wrapper">
							<view class="psdBox-header">请输入交易密码</view>
							<view class="psdBox-input">
								<input type="password" v-model="password" placeholder="请输入交易密码" placeholder-class="inputStyle">
							</view>
							<view class="psdBox-btnBox">
								<view class="psdBox-close" @tap="hidePopup('psdPopup')">取消</view>
								<view class="psdBox-confirm" @tap.stop="$u.throttle(psdSubmit,1000)">确定</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 头部 -->
		<view class="header_bar header_fixed header_main">
			<view class="header">
				<view class="header-goBack" @tap.stop="$tools.switchTab('/pages/user/user')"></view>
				<view class="header-title">我的订单</view>
			</view>
		</view> 
		<view class="tabsBox">
				<view class="tabbar-list">
					<view class="tabbar-item" v-for="(item,index) in typeList" :key="index">
						<view class="tabbar-title" :class="[tabActive == index? 'tabbar-title--active' : ''] " @tap.stop="changeTypeList(index,item)">{{ item.name }}</view>
					</view>
				</view>
			</view>
		<view class="sellOrder" :class="{'mainPd--ios' : system_info.platform == 'ios'}">
			<view class="sellOrder-wrapper">
				<view class="sellOrder-list" v-if="isShowPage == true">
					<view class="sellOrder-list__item" v-for="(keyItem,keyIndex) in orderList" :key="keyIndex"
					@tap.stop="$tools.jump('./orderDetails',keyItem.id)">
						<view class="sellOrder-box">
							<view class="sellOrder-top">
								<view class="no">订单编号:{{ keyItem.orderId }}</view>
								<view class="status">{{ getStatus(keyItem.status) }}</view>
							</view>
							<view class="sellOrder-content noBorder" v-for="(item,index) in keyItem.cartInfoList" :key="index">
								<view class="imgBox">
									<!-- <image class="img" :src="'../../static/index/goods-'+(keyIndex+1)+'.png'" mode=""></image> -->
									<image class="img" :src="imgShow(item.cartInfoMap.productInfo.image)" mode=""></image>
								</view>
								<view class="content">
									<view class="name">{{ item.cartInfoMap.productInfo.storeName }}</view>
									<view class="operate">
										<view class="tips">{{ item.cartInfoMap.productInfo.attrInfo.sku }}</view>
										<view class="num">x{{ item.cartInfoMap.cartNum }}</view>
									</view>
									<view class="giveIntegralBox" v-if="Number(keyItem.useIntegral) > 0 || Number(keyItem.gainIntegral) > 0">
										<view v-if="Number(keyItem.useIntegral) > 0" class="giveIntegral">赠送{{ (keyItem.useIntegral) }}消费券</view>
										<view v-if="Number(keyItem.gainIntegral) > 0" class="giveIntegral">赠送{{ (keyItem.gainIntegral) }}积分</view>
									</view>
									<view class="price  mt-10">
										<image class="ico" src="@/static/index/index-icon1.png" mode="widthFix" /> {{ item.cartInfoMap.productInfo.attrInfo.price }}
									</view>
								</view>
							</view>
						</view>
						<view class="sellOrder-bottom">
							<view class="totalPrice">
								实付：<text class=""><image class="ico" src="@/static/index/index-icon1.png" mode="widthFix" />{{ toFloor(jia(keyItem.totalPrice,keyItem.totalPostage)) }}</text>
									<view v-if="keyItem.totalPostage>0">(<text class="unit">含邮费<image class="ico" src="@/static/index/index-icon1.png" mode="widthFix" />{{ keyItem.totalPostage }}</text>)</view>
									<view class="unit" v-else>(包邮)</view>
									</view>
							<!-- <view class="btnBox" v-if="keyItem.status == 0">
								<view class="btn btn--borderStyle" @tap.stop="cancelOrder(keyItem.id)">取消订单</view>
							</view> -->
							<!-- 待收货 -->
							<view class="btnBox" v-if="keyItem.status == 2">
								<!-- <view class="btn btn--borderStyle" @tap.stop="$tools.jump('./seeLog',keyItem.orderId)">查看物流</view> -->
								<view class="btn btn--borderStyle" @tap.stop="$u.throttle(confirmOrder(keyItem.id),1500)">确认收货</view>
							</view>
							<!-- 已完成 -->
							<!-- <view class="btnBox" v-if="keyItem.status == 3">
								<view class="btn btn--borderStyle" @tap.stop="$tools.jump('./seeLog',keyItem.orderId)">查看物流</view>
								<view class="btn btn--borderStyle" @tap.stop="$tools.jump('./orderDetails',keyItem.id,keyItem.status)">查看订单</view>
							</view> -->
						</view>
					</view>
					</view>
					<view class="initNoData" v-if="orderList.length == 0">暂无记录</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		components:{
		},
		data(){
			return{
				status:'',
				tabActive: '',
				orderId: '',
				password: '',
				lsShow: true,
				isShowPage: false,
				pages: 1,
				pageIndex: 1,
				pageSize: 10,
				orderList: [],
				toggle: true,
				keyItemObj: {},
				system_info: '',
				heightTop: 0,
				isOperateShow: false,
				isOperateShowId: '',
				isServerShow: false,
				isServerShowId: '',
				text: '',
				refundDetail: {},
				systemParam:uni.getStorageSync('systemParam')?JSON.parse(uni.getStorageSync('systemParam')):{},
			}
		},
		computed:{
			typeList(){
				return [
					{name: '全部',status:''},
					{name: '待付款',status:0},
					{name: '待发货',status:1},
					{name: '待收货',status:2},
					{name: '已完成',status:3},
				]
			},
			getStatus(){
				// -1=支付中,0=未支付,1=待发货,2=待收货,3=已完成,4=支付失败,5=取消订单 全部 =orderStatus 为空
				return function(type){
					switch (type){
						case -1:
							return '支付中';
							break;
						case 0:
							return '支付中';
							break;
						case 1:
							return '待发货';
							break;
						case 2:
							return '待收货';
							break;
						case 3:
							return '已完成';
							break;
						case 4:
							return '支付失败';
							break;
						case 5:
							return '已取消';
							break;
					}
				}
			},
		},
		onPageScroll(e) {
			this.heightTop = e.scrollTop;
			// console.log("this.heightTop:",this.heightTop);
		},	
		onLoad(options) {
			// //0=待付款,1=待发货,2=待收货,3=已完成 4售后 全部 =orderStatus 为空
			if(options.value1){
				this.tabActive = Number(options.value1) +1;
				this.status = Number(options.value1)
			}
		},
		onShow() {
			this.init();
			this.system_info = uni.getSystemInfoSync();
		},
		onReachBottom() {
			if (this.pageIndex >= this.pages) {
				return this.$tools.toast('到底了');
			} else {
				this.pageIndex++;
				console.log("+++")
				this.getOrderList();
			}
		},
		methods: {
			init(){
				this.lsShow = true;
				this.pages = 1;
				this.pageIndex = 1;
				this.isShowPage = false;
				this.orderList = [];
				this.getOrderList();
				this.getUserMoney();
				// this.isShowPage = true;
				// this.orderList = [
				// 	{id: 1,orderId: 'ZTBH63736843944',status: 3,totalPrice: '2000',
				// 	cartInfoList:[
				// 		{cartInfoMap:{cartNum: '1',productInfo: {storeName: '表现金美孚SP级0W-40全合', attrInfo: {sku: '全黑色；25码'},}}}
				// 	]},
				// ];
			},
			// 确认收货
			confirmOrder(orderId){
				const that = this
				uni.showModal({
				title: '提示',
				content: '确认收货？',
				success: function (res) {
					if (res.confirm) {
						console.log('用户点击确定');
						var data = {};
						data['id'] = orderId;
						console.log("data：",data);
						that.$Ajax('/api/order/confirmOrder/'+orderId,
						data,
						res => {
								if (res.code == 200) {
									that.$tools.toast("确认收货成功");
									that.isShowPage = false;
									that.pages = 1;
									that.pageIndex = 1;
									that.orderList = [];
									that.getOrderList();
								}
							}
						),err =>{
						}
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			})
			},
			// 取消订单
			cancelOrder(orderId){
				const that = this
				uni.showModal({
				title: '提示',
				content: '确定取消订单？',
				success: function (res) {
					if (res.confirm) {
						console.log('用户点击确定');
						var data = {};
						data['id'] = orderId;
						console.log("data：",data);
						that.$Ajax('/api/order/cancelOrder/'+orderId,
						data,
						res => {
								if (res.code == 200) {
									that.$tools.toast("取消订单成功");
									that.isShowPage = false;
									that.pages = 1;
									that.pageIndex = 1;
									that.orderList = [];
									that.getOrderList();
								}
							}
						),err =>{
						}
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			})
			},
			// 订单列表
			getOrderList() {
				var data = {};
				data['orderStatus'] = this.status;
				data['pageIndex'] = this.pageIndex;
				data['pageSize'] = this.pageSize;
				console.log("data：",data);
				uni.showLoading({
					mask: true
				})
				this.$Ajax('/api/order/orderList',data,res => {
						if (res.code == 200) {
							this.pages = res.data.pages;
							this.orderList = this.orderList.concat(res.data.list);
							this.isShowPage = true;
							this.$forceUpdate(); 
							uni.hideLoading();
						} 
					},err => {
						uni.hideLoading();
					}, 'GET'
				)
			},
			changeTypeList(index,item) {
				if(this.tabActive != index){
					this.tabActive = index
					this.status = item.status
					this.isShowPage = false;
					this.pageIndex = 1;
					this.orderList = [];
					this.getOrderList();
				}
			},
			/* 弹出框公用 */
			openPopup(e) {
				this.$refs[e].open();
			},
			hidePopup(e) {
				this.$refs[e].close();
				this.password = '';
			},
			changePopup(e) {
				this.typePopup = e.type;
				console.log('popup ' + e.type + ' 状态', e.show);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pages{
		padding-bottom: 24rpx;
	}
	
	.header + view{
		padding-top: 0 !important;
	}
	.tabsBox{
		background: #FFFFFF;
		
	}
	.tabbar{
		&-item{
			width: 25%;
		}
	}
	
</style>